<template>
	<view class="pro-group-module">
		<view class="pro-group" v-if="content.styleContentType === 'row2' || content.styleContentType === 'row3'"
			:style="{backgroundColor: content.bgColor}">
			<group-item-row v-for="pro in proList" :key="pro.id" :info="pro" :proStyle="proItemStyle"/>
		</view>
		<view class="pro-group" v-else-if="content.styleContentType === 'rowLine'" :style="{backgroundColor: content.bgColor}">
			<group-item-line v-for="pro in proList" :key="pro.id" :info="pro" :proStyle="proItemStyle" />
		</view>
		<scroll-view scroll-x="true" style="white-space: nowrap;" v-else>
			<view class="pro-list-scroll">
				<group-item-row v-for="pro in proList" :key="pro.id" :info="pro" :proStyle="proItemStyle"/>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { getProducts } from '@/api/home.js';
	import GroupItemRow from './goodsItem/groupItemRow.vue';
	import GroupItemLine from './goodsItem/groupItemLine.vue';
	export default {
		data() {
			return {
				proList: []
			}
		},
		props: {
			content: {
				type: Object,
				default: () => {}
			}
		},
		components: {
			GroupItemLine,
			GroupItemRow
		},
		computed: {
			proItemStyle() {
				let styleObj = {
					borderRadius: `${this.content.moduleRadius * 2 || 0}rpx`,
					imgRadius: `${this.content.imgRadius * 2 || 0}rpx`,
					backgroundColor: this.content.proBgColor || 'transparent',
					textColor: this.content.textColor || '#444',
				};
				if (this.content.styleContentType === 'row2') {
					styleObj.width = '350rpx';
					styleObj.imgWidth = '304rpx';
				} else if (this.content.styleContentType === 'row3') {
					styleObj.width = '226rpx';
					styleObj.imgWidth = '182rpx';
				} else if (this.content.styleContentType === 'scroll') {
					styleObj.width = '200rpx';
					styleObj.imgWidth = '160rpx';
					styleObj.marginLeft = '20rpx';
					styleObj.marginBottom = 0;
				}
				return styleObj;
			},
		},
		methods: {
			init() {
				const ids = this.content.productList.map(item => item.id);
				if (ids && ids.length) {
					this.getProListInfo(ids);
				}
			},
			async getProListInfo(ids) {
				const params = {ids, storeId: uni.getStorageSync('currentShopId')};
				await getProducts(params).then(res => {
					if(res.success) {
						this.proList = res.data || [];
					}
				}).catch(error => {
					console.log(error);
				})
			}
		},
		mounted() {
			this.init();
			uni.$on('refreshTmpData', () => {
				this.init();
			})
		}
		
	}
</script>

<style lang="scss" scoped> 
	.pro-group-module {
		width: 750rpx;
	}
	
	.pro-group {
		display: flex;
		width: 750rpx;
		flex-wrap: wrap;
		padding: 20rpx 20rpx 0 20rpx;
		justify-content: space-between;
	}
	
	.pro-list-scroll {
		display: flex;
		width: 100%;
	}
</style>